<template>
  <div class="pagination">
    <div class="paging-count" :class="{ 'paging-slide-not': page.current === 1 }" @click="dataPrev">
      上一页
    </div>
    <div class="paging-child" v-if="totalPage < 10">
      <div v-for="count in totalPage" :key="count">
        <input
          type="radio"
          name="pagination"
          :id="`paging${count}`"
          hidden
          @change="pagingChange(count)"
          :checked="count === page.current"
        />

        <label :for="`paging${count}`" class="paging-count">{{ count }}</label>
      </div>
    </div>

    <div class="paging-child" v-else-if="totalPage >= 10 && page.current < 5">
      <div v-for="count in 5" :key="count">
        <input
          type="radio"
          name="pagination"
          :id="`paging${count}`"
          hidden
          @change="pagingChange(count)"
          :checked="count === page.current"
        />

        <label :for="`paging${count}`" class="paging-count">{{ count }}</label>
      </div>
      <div class="paging-count">...</div>
      <div class="paging-count" @click="emit('pagingChange', totalPage)">{{ totalPage }}</div>
    </div>
    <div class="paging-child" v-else-if="totalPage >= 10 && page.current < totalPage - 3">
      <div class="paging-count" @click="emit('pagingChange', 1)">1</div>
      <div class="paging-count">···</div>
      <div v-for="count in 5" :key="count">
        <div
          :for="`paging${count}`"
          class="paging-count"
          :class="{ 'div-checked': totalPage + count - 3 === totalPage }"
          @click="pagingChange(page.current + count - 3)"
        >
          {{ page.current + count - 3 }}
        </div>
      </div>
      <div class="paging-count">···</div>
      <div class="paging-count" @click="emit('pagingChange', totalPage)">{{ totalPage }}</div>
    </div>
    <div class="paging-child" v-else-if="totalPage >= 10 && page.current >= totalPage - 3">
      <div class="paging-count" @click="emit('pagingChange', 1)">1</div>

      <div class="paging-count">...</div>

      <div v-for="count in 5" :key="count">
        <input
          type="radio"
          name="pagination"
          :id="`paging${count}`"
          hidden
          @change="pagingChange(totalPage + count - 5)"
          :checked="totalPage + count - 5 === page.current"
        />

        <label :for="`paging${count}`" class="paging-count">{{ totalPage + count - 5 }}</label>
      </div>
    </div>
    <div
      class="paging-count"
      :class="{ 'paging-slide-not': page.current === totalPage }"
      @click="dataNext"
    >
      下一页
    </div>

    <div class="search-laypout">
      <p>前往</p>
      <div class="paging-count count-input">
        <form @submit.prevent="toPage">
          <input type="text" v-model="searchText" />
        </form>
      </div>
      <p>页</p>
    </div>

    <Select
      :tree-select-data="treeData"
      v-model="page.limit"
      @select-item="selectItem"
      class="select-reset"
    />
  </div>
</template>

<script setup lang="ts">
import { TreeSelectOption } from './Select.vue'

export interface Page {
  limit: number
  count: number
  current: number
}

interface Props {
  page: Page
  showSize?: boolean
  pageSizeOptions?: number[]
}

const props = withDefaults(defineProps<Props>(), {
  page: () => ({
    limit: 10,
    count: 0,
    current: 1
  }),
  showSize: false,
  pageSizeOptions: () => [10, 20, 50]
})

const emit = defineEmits(['dataPrev', 'pagingChange', 'dataNext', 'sizeChange'])

const totalPage = computed(() => {
  const { limit, count } = props.page
  const totalPage = Math.ceil(count / limit)
  return totalPage
})

const treeData = computed<Array<TreeSelectOption>>(() => {
  return props.pageSizeOptions.map((i) => {
    return {
      key: i,
      label: `${i}条/页`
    }
  })
})

const selectItem = () => {
  emit('sizeChange', props.page.limit)
}

const searchText = ref('1')

const toPage = () => {
  const count = parseInt(searchText.value)

  if (!isNaN(count) && count > 0 && count <= totalPage.value) {
    pagingChange(count)
  }
}

const pagingChange = (count: number) => {
  emit('pagingChange', count)
}

const dataPrev = () => {
  if (props.page.current !== 1) {
    emit('dataPrev')
  }
}
const dataNext = () => {
  if (props.page.current !== totalPage.value) {
    emit('dataNext')
  }
}
</script>

<style scoped lang="scss">
$font-color: #9d9d9d;

.pagination {
  display: flex;
  align-items: center;
  margin: 40px 0;
  gap: 9px;

  .paging-child {
    display: flex;
    gap: 9px;
  }

  .paging-count {
    height: 32px;
    min-height: 32px;
    line-height: 30px;
    background: #fff;
    font-size: 14px;
    color: $font-color;
    padding: 0 12px;
    cursor: pointer;
    transition: 0.4s;
    border-radius: 4px;
    border: 1px solid #e1e1e1;
    display: block;
    text-wrap: nowrap;

    &:not(.paging-slide-not) {
      &:hover {
        border-color: $main-color;
        color: $main-color;
      }
    }
  }

  .div-checked,
  input:checked + label {
    background: $main-color;
    color: #fff;

    &:hover {
      color: #fff;
      border-color: #e1e1e1;
    }
  }

  .paging-slide-not {
    background: #ddd;
    cursor: not-allowed;
    border-color: #ddd;
  }

  .search-laypout {
    display: flex;
    align-items: center;
    margin-left: 12px;

    .count-input {
      width: 56px;
      display: flex;
      justify-content: center;
      margin: 0 6px;
      input {
        background: none;
        border: none;
        outline: none;
        height: 100%;
        font-size: 16px;
        color: $font-color;
        width: 56px;
        text-align: center;
      }
    }

    p {
      font-size: 14px;
      color: $font-color;
      text-wrap: nowrap;
    }
  }

  .select-reset {
    width: 100px;
    margin-left: 12px;

    :deep(.input-main) {
      border: 1px solid #e1e1e1;
      .select-layout p {
        color: $font-color;
      }
    }

    :deep(.tree-main) {
      .title-menu > p {
        color: $font-color;
      }
    }
  }
}
</style>
